<template>
  <div>
    <el-page-header @back="goBack" content="详情页面"> </el-page-header>
    <el-input v-model="search" placeholder="请输入内容"></el-input>
    <el-button @click="getAllData()" icon="el-icon-search" circle></el-button>
    <el-button @click="addOrUpdate()" type="info" round>新增</el-button>
    <el-button @click="deleteBatch()" type="danger" round>批量删除</el-button>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column fixed prop="id" label="编号" width="150">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="address" label="地址" width="120">
      </el-table-column>
      <el-table-column prop="gender" label="性别" width="120">
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="120"> </el-table-column>
      <el-table-column prop="dept" label="部门" width="120"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            @click="deleteById(scope.row.id)"
            type="danger"
            icon="el-icon-delete"
            size="small"
          ></el-button>
          <el-button
            @click="addOrUpdate(scope.row.id)"
            type="primary"
            size="small"
            icon="el-icon-edit"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getAllData"
    ></add-or-update>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import AddOrUpdate from "./updateAndAdd";
export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {
    AddOrUpdate,
  },
  props: {},
  data() {
    return {
      tableData: [
        {
          id: null,
          name: "",
          address: "",
          password: "",
          age: null,
          dept: "",
        },
      ],
      search: "",
      addOrUpdateVisible: false,
      multipleSelection: [],
    };
  },
  //计算属性 类似于 data 概念
  computed: {},
  //监控 data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 查询
    getAllData() {
      this.$axios.get(`/staff/selectAll/${this.search}`,).then((res) => {
        if (res.status === 200) {
          // this.$message(res.data.msg);
          console.log(res.data.data);
          this.tableData = res.data.data;
        } else {
          this.$message(res.data.msg);
          //  this.$refs.form.resetFields();
        }
      });
    },
    // 删除
    deleteById(id) {
      console.log("删除拿到数据" + id);
      this.$confirm("确定删除该记录吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios.delete(`/staff/delete/${id}`).then((res) => {
            if (res.status === 200) {
              this.$message(res.data.msg);
              // console.log(res.data.data);
              // this.tableData=res.data.data;
              this.getAllData();
            } else {
              this.$message(res.data.msg);
              //  this.$refs.form.resetFields();
            }
          });
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    deleteBatch() {
      // this.multipleSelection.forEach(id=>{
      //   this.deleteById(id);
      // })
       this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
             this.$axios
        .delete(`/staff/deleteBatch/${this.multipleSelection}`)
        .then((res) => {
          if (res.status === 200) {
            this.$message(res.data.msg);
            // console.log(res.data.data);
            // this.tableData=res.data.data;
            this.getAllData();
          } else {
            this.$message(res.data.msg);
            //  this.$refs.form.resetFields();
          }
        });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
     
    },

    // 增和修改
    addOrUpdate(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        console.log(id, "新增或修改");
        this.$refs.addOrUpdate.init(id);
      });
    },
    goBack() {
      this.$router.push("/home");
      console.log("go back");
    },
    handleSelectionChange(data) {
      data.forEach((element) => {
        this.multipleSelection.push(element.id);
      });
      // this.multipleSelection = val.id;
      console.log(this.multipleSelection);
    },
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    this.getAllData();
  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有 keep-alive 缓存功能，这个函数会触发
};
</script>
<style scoped>
.el-input {
  font-size: 14px;
  width: 30%;
}
.el-button--small {
  font-size: 12px;
  width: 40px;
}
.el-page-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  line-height: 50px;
}
</style>